<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击事件</title>
    <style>
        .bg-change{
            border: 1px solid black;
            height: 40px;
            width: 120px;
            border-radius: 2px;
            margin-top: 16px;
            outline: dashed red;
            cursor: pointer;
        }
        .box{
            width: 120px;
            height: 120px;
            background: #4caf50;
            border-radius: 60px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <button class="bg-change">点这里改变颜色</button>
    <script>
        var boxEle = document.querySelector('.box');
        var btnEle = document.querySelector('.bg-change');

        // 随机生成一个颜色 具体实现可以不管
        function getColor() {
            return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
        }

        btnEle.onclick = function() {
            boxEle.style.backgroundColor = getColor();
        };
    </script>
</body>
</html>